<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ViewUI example</title>
    <link href="/public/css/device.css?version=1" rel="stylesheet" type="text/css" />
    <link href="/public/lib/bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
    <link href="/public/lib/adminlte/js/adminlte.min.js" rel="stylesheet" type="text/css" />
    <link href="/public/lib/adminlte/css/adminlte.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/ajax/libs/vue/2.7.10/vue.js"></script>
    <script src="/ajax/libs/axios/0.21.0/axios.min.js"></script>

    <script type="text/javascript" src="/ajax/libs/iview/3.5.0/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/ajax/libs/iview/3.5.0/styles/iview.css">

    <link href="/public/lib/ionicons/3.0.0/css/ionicons.css" rel="stylesheet">
    <link href="/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
</head>
<body>
<div id="app" class="app-container">
    <i-button @click="show">Click me! 浏览器兼容性测试</i-button>
    <Modal v-model="visible" title="Welcome">{{message}}</Modal>
</div>
<script>
    // 等待 DOM 加载完成
    document.addEventListener('DOMContentLoaded', function() {
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    i18n: {
                        "device.html.container_ptl": "容器PTL"
                    },
                    message: 'Welcome to ViewUI',
                    visible: false
                }
            },
            created(){
                this.getI18NResource();
            },
            mounted(){
                window.app = this;
            },
            methods: {
                show: function () {
                    // 测试 Vue 2 核心依赖
                    var supports = {
                        vue2: this.supportVue2(),
                        consts: this.supportsConst(),
                        asyncAwait: this.supportsAsyncAwait(),
                        flatmap: this.supportsFlatMap(),
                        urlSearchParam: this.supportsURLSearchParams(),
                        eventSource: this.supportsEventSource()
                    }
                    this.message = JSON.stringify(supports);
                    this.visible = true;
                },
                supportVue2(){
                    return typeof Object.defineProperty !== 'undefined' &&
                        typeof Promise !== 'undefined' &&
                        typeof Object.assign !== 'undefined'
                },
                supportsConst() {
                    try {
                        eval('const x = 1;');
                        return true;
                    } catch (e) {
                        return false;
                    }
                },
                supportsAsyncAwait() {
                    try {
                        eval('async function test() {}');
                        return true;
                    } catch (e) {
                        return false;
                    }
                },
                supportsFlatMap() {
                    return typeof Array.prototype.flatMap === 'function';
                },
                supportsURLSearchParams() {
                    return typeof URLSearchParams !== 'undefined';
                },
                supportsEventSource() {
                    try {
                        // 检查基本支持
                        if (typeof EventSource === 'undefined') {
                            return false;
                        }

                        // 检查关键方法
                        let source = new EventSource('about:blank');
                        let methodsExist =
                            typeof source.onmessage === 'object' &&
                            typeof source.onerror === 'object' &&
                            typeof source.onopen === 'object' &&
                            typeof source.close === 'function';
                        source.close();
                        return methodsExist;
                    } catch (e) {
                        return false;
                    }
                },
                refreshData(){

                },
                getI18NResource(){
                    axios.get('/admin/i18n/mappings/default')
                        .then(response => {
                            let result = response.data
                            this.i18n = result.data;
                        })
                        .catch(error => {
                            this.$Message.error({content: this.i18n["device.error.FAIL"]+":"+error, duration: 3, closable: true});
                        });
                }
            }
        })

    });
    function refreshData() {
        window.app.refreshData();
    }
</script>
</body>
</html>
